{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        {include file='public:left-menu'/}
        <!--End 左侧导航-->
        <!--头部信息-->
        {include file='public:nav-header' title="商品管理" subTitle="添加编辑商品"/}
        <!--End 头部信息-->
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <ul class="nav nav-tabs page-tabs">
                                <li class="active" data-id="info"><a href="javascript:;">商品信息</a></li>
                                <li data-id="photos"><a href="javascript:;">商品相册</a></li>
                                <li data-id="model"><a href="javascript:;">商品模型</a></li>
                            </ul>
                            <div class="tab-content">
                                <form method="post" id="submit-form" class="row">
                                    <div>
                                        <div id="info">
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品名称</label>
                                                <input type="text" class="form-control" name="goods_name"
                                                       value="{$info.goods_name}" placeholder="请输入商品名称"/>
                                                <span class="error" id="err_goods_name"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title">商品简介</label>
                                                <textarea class="form-control" name="goods_remark" rows="3"
                                                          placeholder="请输入商品简介">{$info.goods_remark}</textarea>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title">商品货号</label>
                                                <input type="text" class="form-control" name="goods_sn"
                                                       value="{$info.goods_sn}" placeholder="请输入商品货号"/>
                                                <span class="help">如果不填会自动生成</span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <div class="form-inline">
                                                    <span class="tit"><em class="require">*</em>商品分类</span>
                                                    <select id="cat_id_1" class="input-group-select" name="cat_id_1">
                                                        <option value="">请选择商品分类</option>
                                                        {volist name="$cat_list" id="cat"}
                                                        <option value="{$cat.id}" {if
                                                                $info.cat_id_1==$cat.id}selected{/if}>{$cat.name}
                                                        </option>
                                                        {/volist}
                                                    </select>
                                                    <select id="cat_id_2" class="input-group-select" name="cat_id_2">
                                                        <option value="">请选择商品分类</option>
                                                        {volist name="$cat_list2" id="cat2"}
                                                        <option value="{$cat2.id}" {if
                                                                $info.cat_id_2==$cat2.id}selected{/if}>{$cat2.name}
                                                        </option>
                                                        {/volist}
                                                    </select>
                                                    <select id="cat_id_3" class="input-group-select" name="cat_id_3">
                                                        <option value="">请选择商品分类</option>
                                                        {volist name="$cat_list3" id="cat3"}
                                                        <option value="{$cat3.id}" {if
                                                                $info.cat_id_3==$cat3.id}selected{/if}>{$cat3.name}
                                                        </option>
                                                        {/volist}
                                                    </select>
                                                </div>
                                                <span class="error" id="err_cat_id_2"></span>
                                            </div>
                                            <div class="row" style="padding: 0 15px">
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>市场价格</label>
                                                    <input type="text" class="form-control" name="market_price"
                                                           value="{$info.market_price}" placeholder="请输入市场价格"/>
                                                    <span class="error" id="err_market_price"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>商品价格</label>
                                                    <input type="text" class="form-control" name="goods_price"
                                                           value="{$info.goods_price}" placeholder="请输入商品价格"/>
                                                    <span class="error" id="err_goods_price"></span>
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label class="form-title"><em class="require">*</em>赠送消费券</label>
                                                    <input type="text" class="form-control" name="jifen" value="{$info.jifen}" placeholder="请输入赠送消费券"/>
                                                    <span class="error" id="err_jifen"></span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label><em class="require">*</em>商品主图</label>
                                                <div class="upload-row">
                                                    <img class="upload-img" id="goods_img"
                                                         src="{$info.goods_img|default='__STATIC__/images/upload.png'}">
                                                    <input type="hidden" name="goods_img" value="{$info.goods_img}">
                                                    <div class="input-group-btn">
                                                        <button onclick="GetUploadify(1,'goods_img','goods/{$store.store_id}','call_back')"
                                                                class="btn btn-default" type="button">上传图片
                                                        </button>
                                                    </div>
                                                </div>
                                                <span class="error" id="err_goods_img"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品库存</label>
                                                <input type="text" class="form-control" name="store_count"
                                                       value="{$info.store_count}" placeholder="请输入商品库存"/>
                                                <span class="help text-red">注:如果该商品有规格 则按照规格库存累加 此处设置将无效</span>
                                                <span class="error" id="err_store_count"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <h5>上架</h5>
                                                <div class="btn-group form-group-toggle">
                                                    <label class="radio-btn radio-theme {if $info.is_on_sale==1}active{/if}">
                                                        <input type="radio" name="is_on_sale" value="1" {if
                                                               $info.is_on_sale==1}checked{/if}>
                                                        <i class="mdi mdi-checkbox-marked-circle-outline"> 是</i>
                                                    </label>
                                                    <label class="radio-btn radio-default {if $info.is_on_sale==0}active{/if}">
                                                        <input type="radio" name="is_on_sale" value="0" {if
                                                               $info.is_on_sale==0}checked{/if}>
                                                        <i class="mdi mdi-close-circle-outline"> 否</i> </label>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品排序</label>
                                                <input type="text" class="form-control" name="sort"
                                                       value="{$info.sort|default=50}" placeholder="请输入商品排序"/>
                                                <span class="error" id="err_sort"></span>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label class="form-title"><em class="require">*</em>商品详情</label>
                                                <textarea class="ueditor" id="content" name="goods_content"
                                                          placeholder="请输入商品详情">{$info.goods_content}</textarea>
                                                <span class="error" id="err_goods_content"></span>
                                            </div>
                                        </div>
                                        <div id="photos" style="display: none">
                                            <div class="form-group col-md-12">
                                                <div class="form-controls">
                                                    <ul class="list-inline clearfix lyear-uploads-pic">
                                                        {volist name="$info.goods_images" id="goods_img"}
                                                        <li class="col-xs-4 col-sm-3 col-md-2">
                                                            <figure>
                                                                <input type="hidden" name="goods_images[]"
                                                                       value="{$goods_img.image_url}">
                                                                <img src="{$goods_img.image_url}">
                                                                <figcaption>
                                                                    <a onclick="ClearPicArr2(this,'{$goods_img.image_url}')"
                                                                       class="btn btn-round btn-square btn-danger"><i
                                                                            class="mdi mdi-delete"></i></a>
                                                                </figcaption>
                                                            </figure>
                                                        </li>
                                                        {/volist}
                                                        <li class="col-xs-4 col-sm-3 col-md-2 add-pic"
                                                            style="min-height: 110px">
                                                            <a class="pic-add" id="add-pic-btn"
                                                               onClick="GetUploadify(10,'','goods','call_back2');"
                                                               title="点击上传"></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="model" style="display: none">
                                            <dl class="row">
                                                <div class="tab-pane" id="tab_goods_spec">
                                                    <table class="table table-bordered" id="goods_spec_table">
                                                        <tr>
                                                            <td>商品模型:</td>
                                                            <td style="text-align: left">
                                                                <select name="spec_type" id="spec_type"
                                                                        class="input-group-select">
                                                                    <option value="0">选择商品模型</option>
                                                                    {volist name="$goodsType" id="vo"}
                                                                    <option value="{$vo.id}" {if
                                                                            $info.spec_type==$vo.id}selected{/if}>
                                                                        {$vo.name}
                                                                    </option>
                                                                    {/volist}
                                                                </select>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <div class="row">
                                                        <!-- ajax 返回规格-->
                                                        <div id="ajax_spec_data" class="col-xs-12"></div>
                                                    </div>
                                                </div>
                                            </dl>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <input type="hidden" name="{$info.pk}" value="{$info[$info.pk]}">
                                        <input type="hidden" value="{$goods.cat_id_1}" id="good_cat_id_1"/>
                                        <button type="button" class="btn-theme submit-btn">确定</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
    <style>
        .table-input {
            max-width: 100%;
        }
        div.tagsinput span.tag{
            background-color: var(--theme)!important;
        }
    </style>
</div>
{load href="__ADMIN__/plugin/Ueditor/ueditor.config.js"/}
{load href="__ADMIN__/plugin/Ueditor/ueditor.all.min.js"/}
{load href="__ADMIN__/plugin/Ueditor/lang/zh-cn/zh-cn.js"/}
{load href="__ADMIN__/js/jquery-tags-input/jquery.tagsinput.min.css"/}
{load href="__ADMIN__/js/jquery-tags-input/jquery.tagsinput.min.js"/}
<script type="text/javascript">
    var url = "{:url('Ueditor/index',['savePath'=>'goods'])}";
    var ue = UE.getEditor('content', {
        serverUrl: url,
        zIndex: 999,
        initialFrameWidth: "100%", //初化宽度
        initialFrameHeight: 300, //初化高度
        focus: false, //初始化时，是否让编辑器获得焦点true或false
        maximumWords: 99999, //允许的最大字符数 'fullscreen',
        removeFormatAttributes: 'class,style,lang,width,height,align,hspace,valign',
        pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
        autoHeightEnabled: true
    });
    $(function () {
        $('#cat_id_1').on('change',function () {
            var val=$(this).val();
            get_goods_category(val,this);
        });
        $('#cat_id_2').on('change',function () {
            var val=$(this).val();
            get_goods_category(val,this);
        });
        $('[name=goods_type]').on('change',function () {
            var val=$(this).val();
            if (val==2){
                $('#level').show();
            }else {
                $('#level').hide();
            }
        });
        $('.page-tabs li').on('click', function () {
            if ($(this).hasClass('active')) return;
            var id = $(this).attr('data-id');
            $(this).addClass('active').siblings().removeClass('active');
            $('#' + id).show().siblings().hide();
        });
        $('.submit-btn').click(function () {
            $('span.error').hide();
            $('.form-group').removeClass('has-error');
            var url = "{:url('Goods/add_edit_goods',[$info.pk=>$info[$info.pk]])}";
            var data = $('#submit-form').serialize();
            $.ajax({
                type: "POST",
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.code == 1) {
                        showSuccessMsg(data.msg, function () {
                            if (data.data.url) {
                                location.href = data.data.url;
                            }
                        });
                    } else if (data.code == 10) {
                        showErrorMsg(data.msg);
                        $.each(data.result, function (index, item) {
                            $('#err_' + index).text(item).show();
                            $('#err_' + index).parent().addClass('has-error');
                        });
                    } else {
                        showErrorMsg(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    showErrorMsg("网络失败，请刷新后重试!");
                }
            });
        });
    });
    function call_back(fileurl_tmp, fileurl_id) {
        $("[name=" + fileurl_id + "]").val(fileurl_tmp);
        $("#" + fileurl_id).attr('src', fileurl_tmp);
    }

    // 上传商品相册回调函数
    function call_back2(paths) {
        for (var i = 0; i < paths.length; i++) {
            var html = '<li class="col-xs-4 col-sm-3 col-md-2">' +
                ' <figure>' +
                ' <input type="hidden" name="goods_images[]" value="' + paths[i] + '">' +
                ' <img src="' + paths[i] + '">' +
                ' <figcaption>' +
                ' <a onclick="ClearPicArr2(this,\'' + paths[i] + '\')" class="btn btn-round btn-square btn-danger"><i class="mdi mdi-delete"></i></a>' +
                ' </figcaption>' +
                ' </figure>' +
                '</li>';
            $('.add-pic').before(html);
        }
    }

    //上传之后删除组图
    function ClearPicArr2(obj, path) {
        $.ajax({
            type: 'GET',
            url: "{:url('Uploadify/delupload')}",
            data: {action: "del", filename: path},
            success: function () {
                $(obj).parent().parent().parent().remove(); // 删除完服务器的, 再删除 html上的图片
            }
        });
        // 删除数据库记录
        $.ajax({
            type: 'GET',
            url: "{:url('Goods/del_goods_images')}",
            data: {filename: path},
            success: function () {
            }
        });
    }

    function tianchong(item, input) {
        var num = $('#' + item).val();
        $("input[name$='[" + input + "]']").val(num);
    }

    $(function () {
        $("#spec_type").change(function () {
            var goods_id = '{$info.goods_id}';
            var spec_type = $(this).val();
            $.ajax({
                type: 'GET',
                data: {goods_id: goods_id, type_id: spec_type},
                url: "{:url('Goods/ajaxGetSpecSelect')}",
                success: function (data) {
                    $("#ajax_spec_data").html('');
                    $("#ajax_spec_data").append(data);
                    ajaxGetSpecInput();  // 触发完  马上触发 规格输入框
                }
            });
        });
        // 触发商品规格
        $("#spec_type").trigger('change');
    });
    //商品分类切换时，获取下级分类
    function get_goods_category(parent_id,obj) {
        $.ajax({
            type: 'post',
            data: {parent_id: parent_id},
            url: "{:url('Index/get_category')}",
            success: function (data) {
                var html1='<option value="">请选择商品分类</option>';
                var html='';
                $(obj).nextAll().empty().append(html1);
                if (data.code==1){
                    $.each(data.result,function (index,item) {
                        html+='<option value="'+item.id+'">'+item.name+'</option>';
                    })
                }
                $(obj).next().append(html);
            }
        });
    }
    $(document).on('click', '#type_info', function () {
        var type_id = $('#spec_type').val();
        if (type_id == 0) {
            showErrorMsg('请选择商品模型');
        } else {
            add_edit_type(type_id);
        }
    });
    function save_type_call_back(type_id) {
        get_goods_type_list(type_id);
        layer.closeAll();
    }
    function get_goods_type_list(type_id) {
        $.ajax({
            type: 'post',
            data: {type_id: type_id},
            url: "{:url('Goods/ajaxGetGoodsTypeList')}",
            success: function (data) {
                $("#goods_type").html(JSON.parse(data));
                var goods_id = $("input[name='goods_id']").val();
                get_goods_spec_select(goods_id, type_id);
            }
        });
    }
    //商品模型切换时，返回不同的规格输入框
    function get_goods_spec_select(goods_id, type_id) {
        $.ajax({
            type: 'post',
            data: {goods_id: goods_id, type_id: type_id},
            url: "{:url('Goods/ajaxGetSpecSelect')}",
            success: function (data) {
                $("#ajax_spec_data").html('').append(data);
                ajaxGetSpecInput(); // 触发完  马上触发 规格输入框
            }
        });
    }
    function add_edit_type(type_id) {
        var url = "{:url('Goods/type')}";
        if(type_id){
            url += '?id='+type_id;
        }
        layer.open({
            type: 2,
            title: '添加/编辑商品模型',
            shadeClose: true,
            shade: 0.2,
            area: ['1065px', '664px'],
            content: url,
        });
    }
</script>
</body>
</html>
